<template>
	<view class="keyboard-container">
		<view class="flex-row">
			<view class="flex1 flex-row align-center input-box">
				<text class="text-light" v-if="valueArr.length===0">请输入分数</text>
				<text class="text-black" v-else>{{value}}</text>
			</view>
			<view @click.stop="onBack" class="flex-shrink flex-row align-center justify-center back-box">
				<text>删除</text>
			</view>
		</view>
		<view class="flex-row flex-wrap justify-between keys">
			<view @click.stop="e=>onKeyClick(v)" :class="['key-item',v==='取消'?'error':'',v==='确定'?'success':'']"
				v-for="(v,i) of keys" :key="i">
				<text>{{v}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		deepClone,
	} from "@/utils/helpers.js"
	export default {
		name: "Keyboard",
		emits: ['input', 'cancel', 'comfirm'],
		props: {
			value: {
				type: [Number, String],
				default: "",
			},
			maxlength: {
				type: Number,
				default: 6,
			}
		},
		data() {
			return {
				keys: [
					1, 2, 3, 4, 5, 6, 7, 8, 9, "取消", 0, "确定"
				],
			}
		},
		computed: {
			valueArr() {
				return String(this.value).split('');
			},
		},
		methods: {
			onBack() {
				const valueArr = deepClone(this.valueArr);
				if (valueArr.length > 0) {
					valueArr.splice(-1, 1)
				}
				this.$emit('input', valueArr.join(''))
			},
			onCancel() {
				this.$emit('input', "")
				this.$emit('cancel', "")
			},
			onComfirm() {
				this.$emit('input', this.value)
				this.$emit('comfirm', this.value)
			},
			onKeyClick(v) {
				try {
					let value = String(this.value);
					if (value.length >= this.maxlength) {
						throw new Error(`不能大于${this.maxlength}位数`)
					}
					switch (v) {
						case "取消":
							this.onCancel()
							return;
						case "确定":
							this.onComfirm()
							return;

					}
					value = `${value}${v}`;
					console.log(value, this.value)
					this.$emit('input', value);
				} catch (e) {
					toast(e.message)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$textColor:#666;
	$borderColor:#ccc;
	$borderRadius:10rpx;
	$marginBottom:20rpx;
	$keyItemHeight:80rpx;
	$keyboardPadding:20rpx;

	// 20 + 100 + 400 => 520rpx
	$maxHeight:$keyboardPadding+$marginBottom * 5+$keyItemHeight * 5;

	@mixin keyBaseStyle {
		border: solid 1px $borderColor;
		margin-bottom: $marginBottom;
		height: $keyItemHeight;
	}

	@mixin rowCenter {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.keyboard-container {
		height: $maxHeight;
		padding: $keyboardPadding;
	}

	.input-box {
		@include keyBaseStyle;
		padding: 0 20rpx;
		border-right-width: 0;

		.text-black {
			color: $textColor;
			font-weight: 500;
		}
	}

	.back-box {
		@include keyBaseStyle;
		@include rowCenter;
		width: 200rpx;
		color: $textColor;
		font-weight: 400;

	}

	.keys {
		.key-item {
			@include keyBaseStyle;
			@include rowCenter;
			color: $textColor;
			font-weight: 500;
			width: 30%;
			border-radius: $borderRadius;



			&.error {
				border-color: $priceColor;
				color: $priceColor;
				font-weight: 400;
			}

			&.success {
				border-color: $primayColor;
				background-color: $primayColor;
				color: #fff;
				font-weight: 400;
			}
		}
	}
</style>
